<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
</head>
<body>
<form class="layui-form" action="">
    <div class="mainBox">
        <div class="main-container">
            <div class="layui-row" style="margin-bottom: 15px;">
                <div class="layui-col-xs6">
                    <label class="layui-form-label">
                        名称
                    </label>
                    <div class="layui-col-sm4">
                        <input type="text" class="layui-input layui-form-danger" name="wxgzgname" type="text" value="{$model['wxgzgname']??""}" lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <label class="layui-form-label">
                        全拼小写
                    </label>
                    <div class="layui-col-sm4">
                        <input type="text" class="layui-input layui-form-danger" name="appsecret" type="text" value="{$model['appsecret']??""}" lay-verify="required"/>
                    </div>
                </div>
            </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        类别
                    </label>
                    <div class="layui-input-block">
                        <input type="radio" name="appid" value="0" title="输入框" checked lay-filter="appid">
                        <input type="radio" name="appid" value="2" title="多选" lay-filter="appid">
                        <input type="radio" name="appid" value="3" title="下拉框" lay-filter="appid">
                        <input type="radio" name="appid" value="4" title="文本域" lay-filter="appid">
                        <input type="radio" name="appid" value="5" title="地域" lay-filter="appid">
                        <input type="radio" name="appid" value="6" title="图片" lay-filter="appid">
                        <input type="radio" name="appid" value="7" title="视频" lay-filter="appid">
                        <input type="radio" name="appid" value="8" title="音频" lay-filter="appid">
                    </div>
                </div>
                <div class="layui-row" style="margin-bottom: 15px;">
                    <div class="layui-col-xs6" id="div1" style="display:none;">
                        <label class="layui-form-label">
                            输入选项(已"/"区分)
                        </label>
                        <div class="layui-col-sm8">
                            <input type="text" class="layui-input layui-form-danger" name="shuruxiang" type="text" placeholder="男/女/保密"/>
                        </div>
                    </div>
                </div>
                <div class="layui-row" style="margin-bottom: 15px;">
                    <div class="layui-col-xs12" id="div2" style="display:none;">
                        <label class="layui-form-label">
                            地域
                        </label>
                        <!-- <div class="layui-col-sm10" id="area-picker">
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="province" class="province-selector">
                                    <option value="">请选择省</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="city" class="city-selector">
                                    <option value="">请选择市</option>
                                </select>
                            </div>
                            <div class="layui-input-inline" style="width: 200px;">
                                <select name="county" class="county-selector">
                                    <option value="">请选择区</option>
                                </select>
                            </div>
                        </div> -->
                        <textarea class="layui-col-sm10" id="area-pickern" name="diyu">

                        </textarea>
                    </div>
                </div>
        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
<script>
    layui.use(['form', 'jquery','tinymce','uploads','area'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let tinymce = layui.tinymce;
        
        // let area = layui.area;
        // area.render({
        //     elem: '#area-picker',
        //     change: function(res) {
        //         //选择结果
        //         console.log(res);
        //     }
        // });
        
        form.on('radio(appid)',function(data){
            if(data.value == "0"){
                $("#div1").css("display","none");
                $("#div2").css("display","none");
            } else if(data.value == "1") {
                $("#div1").css("display","block");
                $("#div2").css("display","none");
            } else if(data.value == "2") {
                $("#div1").css("display","block");
                $("#div2").css("display","none");
            } else if(data.value == "3") {
                $("#div1").css("display","block");
                $("#div2").css("display","none");
            } else if(data.value == "4") {
                $("#div1").css("display","none");
                $("#div2").css("display","none");
            } else if(data.value == "5") {
                $("#div1").css("display","none");
                $("#div2").css("display","block");
                $.ajax({
                    url:'{$Request.root}/admin.zegzhpz/diyu',
                    data:{},
                    dataType: 'json',
                    type: 'POST',
                    success: function(res) {
                        // console.log(res.data);
                        $("#area-pickern").text(res.data);
                    }
                })
            } else if(data.value == "6") {
                $("#div1").css("display","none");
                $("#div2").css("display","none");
            } else if(data.value == "7") {
                $("#div1").css("display","none");
                $("#div2").css("display","none");
            } else if(data.value == "8") {
                $("#div1").css("display","none");
                $("#div2").css("display","none");
            }
        })

        form.on('submit(save)', function (data) {
            
            //编写自己的判断逻辑（不能为空、必须为数字等）
            $.ajax({
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (res) {
                    //判断有没有权限
                    if (res && res.code == 999) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 2000,
                        })
                        return false;
                    } else if (res.code == 200) {
                        layer.msg(res.msg,{icon:1,time:1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                            parent.layui.table.reload("dataTable");
                        });
                    } else {
                        layer.msg(res.msg,{icon:2,time:1000});
                    }
                }
            })
            return false;
        });
    })
</script>
</body>
</html>
